<!--_meta 作为公共模版分离出去-->
<#include "include/_meta.html">
<!--/meta 作为公共模版分离出去-->
<script src="vue/vue.min.js"></script>
<script type="text/javascript" src="lib/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" src="lib/layer/2.1/layer.js"></script>
<title>添加管理员 - 管理员管理</title>
<meta name="keywords" content="汽车租赁">
<meta name="description" content="H-ui.admin v2.3，是一款由国人开发的轻量级扁平化网站后台模板，完全免费开源的网站后台管理系统模版，适合中小型CMS后台系统。">
</head>
<body>
<article class="page-container">
    <form class="form form-horizontal" id="form-car-add">
        <div class="row cl">
            <label class="form-label col-xs-4 col-sm-3"><span class="c-red">*</span>车牌号：</label>
            <div class="formControls col-xs-8 col-sm-9">
                <input type="text" class="input-text" autocomplete="off" value="" placeholder="车牌号" id="carIdCard"
                       name="carIdCard">
            </div>
        </div>

        <div class="row cl">
            <label class="form-label col-xs-4 col-sm-3"><span class="c-red">*</span>汽车品牌：</label>
            <div class="formControls col-xs-8 col-sm-9">
                <input type="text" class="input-text" autocomplete="off" value=""
                       placeholder="汽车品牌" id="carBrand" name="carBrand">
            </div>
        </div>

        <div class="row cl">
            <label class="form-label col-xs-4 col-sm-3"><span class="c-red">*</span>汽车型号：</label>
            <div class="formControls col-xs-8 col-sm-9">
                <input type="text" class="input-text" autocomplete="off" value=""
                       placeholder="汽车型号" id="carModel" name="carModel">
            </div>
        </div>

        <div class="row cl">
            <label class="form-label col-xs-4 col-sm-3"><span class="c-red">*</span>每日租金：</label>
            <div class="formControls col-xs-8 col-sm-9">
                <input type="text" class="input-text" value="" placeholder="每日租金"
                       id="carPrice" name="carPrice">
            </div>
        </div>

        <div class="row cl">
            <label class="form-label col-xs-4 col-sm-3"><span class="c-red">*</span>燃料类型（0 油/1 电/2 混动）：</label>
            <div class="formControls col-xs-8 col-sm-9">
                <input type="text" class="input-text" value=""
                       placeholder="燃料类型" id="carDriverType" name="carDriverType">
            </div>
        </div>

        <div class="row cl">
            <label class="form-label col-xs-4 col-sm-3"><span class="c-red">*</span>汽车颜色：</label>
            <div class="formControls col-xs-8 col-sm-9">
                <input type="text" class="input-text" autocomplete="off" value=""
                       placeholder="汽车颜色" id="carColor" name="carColor">
            </div>
        </div>

        <div class="row cl">
            <label class="form-label col-xs-4 col-sm-3"><span class="c-red">*</span>汽车油量：</label>
            <div class="formControls col-xs-8 col-sm-9">
                <input type="text" class="input-text" autocomplete="off" value=""
                       placeholder="汽车油量" id="carOilValue" name="carOilValue">
            </div>
        </div>

        <div class="row cl">
            <label class="form-label col-xs-4 col-sm-3"><span class="c-red">*</span>汽车电量：</label>
            <div class="formControls col-xs-8 col-sm-9">
                <input type="text" class="input-text" autocomplete="off" value=""
                       placeholder="汽车电量" id="carElectricValue" name="carElectricValue">
            </div>
        </div>

        <div class="row cl">
            <label class="form-label col-xs-4 col-sm-3"><span class="c-red">*</span>合同起始日期：</label>
            <div class="formControls col-xs-8 col-sm-9">
                <input type="text" class="input-text Wdate"
                       onfocus="WdatePicker({skin:'whyGreen',startDate:'%y-%M-%d %H:00:00',dateFmt:'yyyy-MM-dd HH:mm:ss'})"
                       autocomplete="off" value="" placeholder="合同起始日期"
                       id="carContractStart" name="carContractStart">
            </div>
        </div>

        <div class="row cl">
            <label class="form-label col-xs-4 col-sm-3"><span class="c-red">*</span>合同结束日期：</label>
            <div class="formControls col-xs-8 col-sm-9">
                <input type="text" class="input-text Wdate"
                       onfocus="WdatePicker({skin:'whyGreen',startDate:'%y-%M-%d %H:00:00',dateFmt:'yyyy-MM-dd HH:mm:ss'})"
                       autocomplete="off" value="" placeholder="合同结束日期"
                       id="carContractEnd" name="carContractEnd">
            </div>
        </div>

        <div class="row cl">
            <label class="form-label col-xs-4 col-sm-3"><span class="c-red">*</span>座位数量：</label>
            <div class="formControls col-xs-8 col-sm-9">
                <input type="text" class="input-text" autocomplete="off" value=""
                       placeholder="座位数量" id="carSetNum" name="carSetNum">
            </div>
        </div>

        <div class="row cl">
            <label class="form-label col-xs-4 col-sm-3"><span class="c-red">*</span>汽车购买日期：</label>
            <div class="formControls col-xs-8 col-sm-9">
                <input type="text" class="input-text Wdate"
                       onfocus="WdatePicker({skin:'whyGreen',startDate:'%y-%M-%d %H:00:00',dateFmt:'yyyy-MM-dd HH:mm:ss'})"
                       autocomplete="off" value="" placeholder="汽车购买日期"
                       id="carBuyDate" name="carBuyDate">
            </div>
        </div>

        <div class="row cl">
            <label class="form-label col-xs-4 col-sm-3"><span class="c-red">*</span>汽车发动机型号：</label>
            <div class="formControls col-xs-8 col-sm-9">
                <input type="text" class="input-text" value="" placeholder="汽车发动机型号"
                       id="carEngineId" name="carEngineId">
            </div>
        </div>

        <div class="row cl">
            <label class="form-label col-xs-4 col-sm-3"><span class="c-red">*</span>汽车车架号：</label>
            <div class="formControls col-xs-8 col-sm-9">
                <input type="text" class="input-text" value="" placeholder="汽车车架号"
                       id="carFrameId" name="carFrameId">
            </div>
        </div>

        <div class="row cl">
            <label class="form-label col-xs-4 col-sm-3"><span class="c-red">*</span>租赁点：</label>
            <div class="formControls col-xs-8 col-sm-9">

                <select type="text" class="input-text" id="departmentName" name="departmentName" >

                    <optgroup label="--请选择租赁点--">
                        <option v-for="(item,index) in result">{{item.departmentName}}</option>

                </select>
            </div>
        </div>

        <div class="row cl">
            <label class="form-label col-xs-4 col-sm-3"><span class="c-red">*</span>经手人：</label>
            <div class="formControls col-xs-8 col-sm-9">
                <select type="text" class="input-text" id="userName" name="userName" >

                    <optgroup label="--请选择经手人--">
                        <option v-for="(item,index) in result">{{item.userName}}</option>

                </select>
            </div>
        </div>

        <div class="row cl">
            <label class="form-label col-xs-4 col-sm-3"><span class="c-red">*</span>车主姓名：</label>
            <div class="formControls col-xs-8 col-sm-9">
                <input type="text" class="input-text" value="" placeholder="车主姓名"
                       id="carOwnerName" name="carOwnerName">
            </div>
        </div>

        <div class="row cl">
            <label class="form-label col-xs-4 col-sm-3"><span class="c-red">*</span>车主身份证号：</label>
            <div class="formControls col-xs-8 col-sm-9">
                <input type="text" class="input-text" value=""
                       placeholder="车主身份证号" id="carOwnerIdCard" name="carOwnerIdCard">
            </div>
        </div>

        <div class="row cl">
            <label class="form-label col-xs-4 col-sm-3"><span class="c-red">*</span>车主手机：</label>
            <div class="formControls col-xs-8 col-sm-9">
                <input type="text" class="input-text" value=""
                       placeholder="车主手机" id="carOwnerPhone" name="carOwnerPhone">
            </div>
        </div>

        <div class="row cl">
            <label class="form-label col-xs-4 col-sm-3"><span class="c-red">*</span>外观类型（0 经济型/1 舒适性/2 精英型/3 SUV/4 商务型/5
                高端 ）：</label>
            <div class="formControls col-xs-8 col-sm-9">
                <input type="text" class="input-text" autocomplete="off" value=""
                       placeholder="外观类型" id="carType" name="carType">
            </div>
        </div>

        <div class="row cl">
            <label class="form-label col-xs-4 col-sm-3"><span class="c-red">*</span>汽车类型（0 手动/1 自动）：</label>
            <div class="formControls col-xs-8 col-sm-9">
                <input type="text" class="input-text" autocomplete="off" value=""
                       placeholder="汽车类型" id="carIsAuto" name="carIsAuto">
            </div>
        </div>

        <div class="row cl">
            <label class="form-label col-xs-4 col-sm-3"><span class="c-red">*</span>汽车排量：</label>
            <div class="formControls col-xs-8 col-sm-9">
                <input type="text" class="input-text" autocomplete="off" value=""
                       placeholder="汽车排量" id="carDisplacement" name="carDisplacement">
            </div>
        </div>

        <div class="row cl">
            <label class="form-label col-xs-4 col-sm-3"><span class="c-red">*</span>汽车卫生费：</label>
            <div class="formControls col-xs-8 col-sm-9">
                <input type="text" class="input-text" autocomplete="off" value=""
                       placeholder="汽车卫生费" id="carHygieneMoney" name="carHygieneMoney">
            </div>
        </div>

        <div class="row cl">
            <label class="form-label col-xs-4 col-sm-3"><span class="c-red">*</span>车辆图片：</label>
            <div class="formControls col-xs-8 col-sm-9">
                <input type="text" class="input-text" value="" placeholder="车辆图片" id="carImage"
                       name="carImage">
            </div>
        </div>

        <div class="row cl">
            <label class="form-label col-xs-4 col-sm-3"><span class="c-red">*</span>缩略图：</label>
            <div class="formControls col-xs-8 col-sm-9" id="uploader-demo" style="withed:150px;height:150px">
                <!--用来存放item-->
                <div id="fileList" class="uploader-list"></div>
                <div id="filePicker">选择图片</div>
            </div>
        </div>
        <div class="row cl">
            <div class="col-xs-8 col-sm-9 col-xs-offset-4 col-sm-offset-3">
                <input onclick="submitAddCar()" class="btn btn-primary radius" type="button" value="提交"/>
            </div>
        </div>
    </form>
</article>

<!--_footer 作为公共模版分离出去-->
<#include "include/_footer.html">
<!--/_footer /作为公共模版分离出去-->
<script type="text/javascript" src="lib/webuploader/0.1.5/webuploader.min.js"></script>
<!--请在下方写此页面业务相关的脚本-->
<script type="text/javascript">
    $(function () {
        var uploader = WebUploader.create({
            auto: true,
            swf: 'lib/webuploader/0.1.5/Uploader.swf',
            server: '/uploadFile',
            pick: '#filePicker',
            fileVal: 'uploadfile',
            resize: false,
            accept: {
                title: 'Images',
                extensions: 'gif,jpg,jpeg,bmp,png',
                mimeTypes: 'image/*'
            }

        });

// 当有文件添加进来的时候
        uploader.on('fileQueued', function (file) {
            var $li = $(
                '<div id="' + file.id + '" class="file-item thumbnail">' +
                '<img>' +
                '<div class="info">' + file.name + '</div>' +
                '</div>'
                ),
                $img = $li.find('img');
            // $list为容器jQuery实例

            $("#uploader-demo").append($li);

            // 创建缩略图
            // 如果为非图片文件，可以不用调用此方法。
            // thumbnailWidth x thumbnailHeight 为 100 x 100
            uploader.makeThumb(file, function (error, src) {
                if (error) {
                    $img.replaceWith('<span>不能预览</span>');

                    return;
                }

                $img.attr('src', src);
            }, "100", "100");
        });


// 文件上传过程中创建进度条实时显示。
        uploader.on('uploadProgress', function (file, percentage) {
            var $li = $('#' + file.id),
                $percent = $li.find('.progress span');

            // 避免重复创建
            if (!$percent.length) {
                $percent = $('<p class="progress"><span></span></p>')
                    .appendTo($li)
                    .find('span');
            }

            $percent.css('width', percentage * 100 + '%');
        });

// 文件上传成功，给item添加成功class, 用样式标记上传成功。
        uploader.on('uploadSuccess', function (file, response) {
            if ($("#carImage").val() == '') {
                $("#carImage").attr("value", (response.flag));
            } else {
                $("#carImage").attr("value", ($("#carImage").val() + ',' + response.flag));
            }

            $('#' + file.id).addClass('upload-state-done');
        });

// 文件上传失败，显示上传出错。
        uploader.on('uploadError', function (file) {
            var $li = $('#' + file.id),
                $error = $li.find('div.error');

            // 避免重复创建
            if (!$error.length) {
                $error = $('<div class="error"></div>').appendTo($li);
            }

            $error.text('上传失败');
        });

// 完成上传完了，成功或者失败，先删除进度条。
        uploader.on('uploadComplete', function (file) {
            $('#' + file.id).find('.progress').remove();
        });

        $('.skin-minimal input').iCheck({
            checkboxClass: 'icheckbox-blue',
            radioClass: 'iradio-blue',
            increaseArea: '20%'
        });

        var app = new Vue({
            el: '#userName',
            data: {
                result: []
            }
        });

        var getUserById = function () {
            $.ajax({
                type:"post",
                dataType:"json",
                url:"/getAllUser",
                success:function(msg){
                    app.result = msg;
                }
            })
        };

        getUserById();

        var app1 = new Vue({
            el: '#departmentName',
            data: {
                result: []
            }
        });

        var getDepartmentById = function () {
            $.ajax({
                type:"post",
                dataType:"json",
                url:"/getAllDepartments",
                success:function(msg){
                    app1.result = msg;
                }
            })
        };

        getDepartmentById();

    });

    var closec = function () {
        var thisName = parent.layer.getFrameIndex(window.name);
        parent.layer.close(thisName);
    };
    var submitAddCar = function () {
        let mustData = ['carIdCard', 'carBrand', 'carModel', 'carPrice', 'carDriverType',
            'carColor', 'carOilValue', 'carElectricValue', 'carContractStart', 'carContractEnd',
            'carSetNum', 'carBuyDate', 'carEngineId', 'carFrameId', 'carOwnerName',
            'carOwnerIdCard', 'carOwnerPhone', 'carType', 'carIsAuto', 'carDisplacement', 'carHygieneMoney'];
        let mustDataTip = ['车牌号不能为空', '汽车品牌不能为空', '汽车型号不能为空', '每日租金不能为空', '燃料类型不能为空',
            '汽车颜色不能为空', '汽车油量不能为空', '汽车电量不能为空', '合同起始日期不能为空', '合同结束日期不能为空',
            '座位数量不能为空', '汽车购买日期不能为空', '汽车发动机型号不能为空', '汽车车架号不能为空', '车主姓名不能为空',
            '车主身份证号不能为空', '车主手机不能为空', '外观类型不能为空', '汽车类型不能为空', '汽车排量不能为空', '汽车卫生费不能为空'];
        let canSet = true;
        console.log(this.form);
        for (let i = 0; i < mustData.length; i++) {
            if ($("#" + mustData[i]).val() == '') {
                layer.msg("必填:" + mustDataTip[i], {icon: 5});
                canSet = false;
                break;
            }
        }
        if (canSet) {
            $.ajax({
                type: "POST",
                url: "/addCar",
                data: $("#form-car-add").serialize(),
                dataType: "json",
                success: function (result) {
                    if (result.flag == 1) {
                        layer.msg(result.flag + ":" + result.msg, {icon: 6});
                    } else {
                        layer.msg(result.flag + ":" + result.msg, {icon: 5});
                    }
                    closec();
                }
            });
        }
    };
</script>
<!--/请在上方写此页面业务相关的脚本-->
</body>
</html>